<template>
  <div v-if="!item.hidden">
    <!-- {{ item }}
    ----------------------- -->
    <el-menu-item
      v-if="item.path && !item.child && !item.redirect"
      :index="basePath"
    >
      <i :class="item.meta.icon"></i>
      <span slot="title">{{ item.meta.title }} </span>
    </el-menu-item>

    <el-submenu v-else ref="subMenu" :index="item.path" popper-append-to-body>
      <template slot="title">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.meta.title }} </span>
      </template>
      <SideMuneItem
        v-for="child in item.children"
        :key="child.path"
        :basePath="basePath + '/' + child.path"
        :item="child"
      />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'SideMuneItem',
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    basePath: {
      type: String,
      default: '',
    },
  },
  computed: {},
  data() {
    return {}
  },
}
</script>

<style></style>
